<template>
  <div>
    <a-form v-if="find" @submit="handleSubmit" :form="form" style="width:50%;;margin:0 auto;">
      <a-form-item v-bind="formItemLayout" label="当前支付密码">
        <div>
          <a-input
            class="input-width"
            placeholder="请输入当前支付密码"
            v-decorator="[
                        'currentpaypwd',
                        {
                            rules: [{
                            required: true, message: '请输入当前支付密码',
                            },{ validator: validateToNextpayword }
                            ],validateTrigger: 'blur'
                        }
                        ]"
            type="password"
          />
          <span style="color:#40a9ff;font-size:12px;" @click="forget">忘记支付密码</span>
        </div>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="新支付密码" help="支付密码为6位纯数字密码">
        <a-input
          class="input-width"
          placeholder="请输入新支付密码"
          v-decorator="[
                        'paypwd',
                        {
                            rules: [{
                            required: true, message: '请输入新支付密码',
                            },{ validator: validateToNextpayword }
                            ],validateTrigger: 'blur'
                        }
                        ]"
          type="password"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="确认新支付密码">
        <a-input
          class="input-width"
          placeholder="确认新支付密码"
          v-decorator="[
                        'paypwdagain',
                        {
                            rules: [{
                            required: true, message: '确认新支付密码',
                            }, {
                            validator: compareToFirstpayword,
                            }],validateTrigger: 'blur'
                        }
                        ]"
          type="password"
        />
      </a-form-item>
      <div style="text-align:center;">
        <a-button style="width:100px;" htmlType="submit" type="primary">确定</a-button>
      </div>
    </a-form>
    <router-view v-if="!find"></router-view>

    <a-modal title="支付密码修改成功！" v-model="visible" :footer="null">
      <div style="text-align:center;">
        <!-- <a-button type="primary" @click="gologin">重新登录</a-button> -->
        <a-button  type="primary" @click="goindex">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
// import GlobalFooter from "../../layouts/GlobalFooter";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import api from "@/common/api";
import { get, post } from "@/common/api";

const ATabPane = ATabs.TabPane;

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    // GlobalFooter,
    ATabPane,
    ATabs,
    AForm
  },
  data() {
    return {
      find: true,
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      currentpaypwd: "",
      paypwdagain: "",
      paypwd: "",
      login: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15,offset:1 },
          md: { span: 14 }
        }
      }
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.transApiSetToken();
  },
  methods: {
    handleChange(value) {
      //console.log(value);
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.currentpaypwd = values.currentpaypwd;
          this.paypwd = values.paypwd;
          // console.log("Received values of form: ", values);
          this.changePayPwd();
        }
      });
    },
    getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(name) != -1){
            return c.substring(name.length, c.length);
          }
        }
        return "";
    },
    changePayPwd() {
      var params = { scope: "updatePwd", key: localStorage.getItem("mobileNo") };
      api.fetchPubKey(
            params,
            res => {
              let data = {
                    onePwd: api.getEncryptData(res.data.pubKey, this.paypwd),
                    twoPwd: api.getEncryptData(res.data.pubKey, this.paypwdagain),
                    payPwd: api.getEncryptData(res.data.pubKey, this.currentpaypwd),
                    key:params.key
              };
              api.ChangePaypwd(
                      data,
                      res => {
                        if (res.code == "OK") {
                          this.visible = true;
                        } else {
                          this.$message.error(res.message);
                        }
                      },
                      err => {}
              );    
            },
            error => {
              alert("错误");
            }
        );

    },
    // 支付密码验证
    validateToNextpayword(rule, value, callback) {
      const form = this.form;
      const reg = new RegExp("^[0-9]{6}$");
      if (value && !reg.test(value)) {
        // form.validateFields(['confirm'], { force: true });
        callback("您输入支付密码的格式有误！");
      } else {
        //console.log("支付密码", value);
        // this.currentpaypwd = value;
      }
      callback();
    },
    compareToFirstpayword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("paypwd")) {
        callback("两次输入的支付密码不一致!");
      } else {
        this.paypwdagain = value;
        callback();
      }
    },

    goindex() {
      this.visible = false;
        this.$router.push("/userMain");
    },
    forget() {
      this.find = false;
      this.$router.push("/per/safeset/modifypayindex/modifypaypw2");
    },
    getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(name) != -1){
            return c.substring(name.length, c.length);
          }
        }
        return "";
    },
    transApiSetToken(){
      var token = this.getCookie("Authorization");
      if(token){
        localStorage.setItem("token",token);
        this.forget();
      }
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}
.type {
  padding: 5px;
  background: #eee;
  margin-bottom: 10px;
}
.input-width {
  width: 68%;
}
.span-wid {
  width: 300px;
  display: inline-block;
  font-size: 13px;
}
.but-sty {
  font-size: 12px;
  padding: 0px 10px;
  height: 28px;
}
</style>
